<template>
  <div class='warpper'>
    <van-empty description='空空如也' v-if='data.length < 1' />
    <div style='margin-top: 10px;' v-if='data.length > 0'>
      <van-cell title='' :value='text'
        @click="isshow == true ? isshow = false : isshow = true; text == '管理' ? text = '取消' : text = '管理'" />
      <van-checkbox-group v-model='result' ref='checkboxGroup'>
        <van-grid :column-num='2'>
          <van-grid-item v-for='(item, index) in data' :key='index'>
            <van-checkbox :name='item.pid' class='ckbox' @click='toggle(item.pid)' v-if='isshow'>
            </van-checkbox>
            <router-link :to="'/productDetails?id=' + item.pid">
              <van-image :src='imgUrls + item.image' width='165' height='150' />
              <span>
                <font size='2'>{{ item.storeName }}</font>
                <div style="height=8px"></div>
                <font size='4px' color='#ff8001'>${{ item.price }}</font>
              </span>
            </router-link>
          </van-grid-item>
        </van-grid>
      </van-checkbox-group>
      <van-divider @click='move' v-if='data.length > 9'>点击加载更多</van-divider>

      <van-submit-bar button-text='删除' @submit='onSubmit' v-if='isshow'>
        <template #default>
          <van-checkbox v-model='checked' style='margin-right: 48%;' @click='toggleAll(ckAll == false ? true : false)'>全选
          </van-checkbox>
        </template>
      </van-submit-bar>
    </div>

  </div>
</template>

<script>
import { delCollects, getCollect } from '../../api/collect'

export default {
  data() {
    return {
      isshow: false,
      text: '管理',
      data: [],
      checked: 0,
      result: [],
      limit: 0,
      list: [],
      imgUrls: this.$baseApi,
      ckAll: false,
      value: 2
    }
  },
  created() {
    this.move()
  },
  methods: {
    move() {
      this.limit += 10
      this.getData(this.limit)
    },
    getData(limit) {
      if (this.$route.query.type == 'foot') {
        this.$route.meta.title = '我得足迹'
      } else {
        this.$route.meta.title = '我的收藏'
      }
      getCollect({
        type: this.$route.query.type,
        limit: limit
      }).then(res => {
        this.data = res.data
      })
    },
    toggle(name) {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i] == name) {
          this.list.splice(i, 1)
          name = null
          return
        }
      }
      if (name != null) {
        this.list.push(name)
      }
    },
    onSubmit() {
      delCollects({
        category: this.$route.query.type,
        productIds: JSON.stringify(this.list).replace('[', '').replace(']', '')
      }).then(res => {
        this.$toast.success('删除成功')
        this.getData()
      })
    },
    toggleAll(ckAll) {
      this.$refs.checkboxGroup.toggleAll(ckAll)
      this.ckAll = ckAll
      this.list = this.result
    }
  }
}
</script>

<style scoped>
.warpper {
  width: calc(100% - 10px);
  margin: 0 auto;
}

.van-grid-item /deep/ .van-grid-item__content--center {
  align-items: flex-start;
  line-height: 20px;
}

.van-grid-item .van-image {
  margin-bottom: 8px;
}

.ckbox {
  top: 10px;
  position: absolute;
  z-index: 2;
}
</style>
